<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="题库" prop="outline">
            <el-input v-model="form.outline" type="textarea" placeholder="请输入题库内容" />
        </el-form-item>
        <el-form-item label="题干" prop="questionTitle">
            <el-input v-model="form.questionTitle" type="textarea" placeholder="请输入题干" />
        </el-form-item>
        <el-form-item label="选项" required>
            <el-form-item :label="item.prefix" :key="item.prefix" v-for="(item, index) in form.items" label-width="50px"
                class="question-item-label">
                <span>{{ item.content }}</span>
            </el-form-item>
        </el-form-item>
        <el-form-item label="正确答案" prop="questionAnswer" required>
            <el-radio-group v-model="form.questionAnswer">
                <el-radio v-for="item in form.items" :key="item.prefix" :label="item.prefix">
                    {{ item.prefix }}
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="答案解析" prop="questionAnswerExplain">
            <el-input v-model="form.questionAnswerExplain" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="题目分值" prop="questionScore" required>
            <el-input-number v-model="form.questionScore" :precision="1" :step="10" :max="100" :min="0" />
        </el-form-item>
        <el-form-item label="难度：" required>
            <el-rate v-model="form.difficult" class="question-item-rate"></el-rate>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="mini" @click="submit">保存</el-button>
            <!-- <el-button type="danger" size="mini" @click="close">关闭</el-button> -->
        </el-form-item>
    </el-form>
</template>

<script>
import { addQuestion, updateQuestion } from "@/api/exam/question";

export default {
    dicts: ['job_category'],
    components: {},
    props: {
        questionType: {
            type: String,
            default: '3'
        },
        question: {
            type: Object,
            default: () => {
                return {
                    id: null,
                    questionTitle: '', // 题干
                    items: [
                        { id: null, prefix: 'A', content: '正确' },
                        { id: null, prefix: 'B', content: '错误' }
                    ], // 选项
                    questionAnswer: '', // 题目答案
                    questionAnswerExplain: '', // 答案解析
                    questionScore: '', // 题目分值
                    difficult: 0, // 题目难度
                };
            }
        }
    },
    data() {
        return {
            form: JSON.parse(JSON.stringify(this.question)),
            rules: {
                questionTitle: [
                    { required: true, message: "题干不能为空", trigger: "blur" }
                ]
            },
        };
    },
    watch: {},
    computed: {},
    methods: {
        reset() {
            this.form = {
                id: null,
                questionTitle: '', // 题干
                items: [
                    { id: null, prefix: 'A', content: '正确' },
                    { id: null, prefix: 'B', content: '错误' }
                ], // 选项
                questionAnswer: '', // 题目答案
                questionAnswerExplain: '', // 答案解析
                questionScore: '', // 题目分值
                difficult: 0 // 题目难度
            };
            this.resetForm("form");
        },
        submit() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.questionType = this.questionType;
                    // 将this.form.items数组转成json字符串
                    this.form.questionText = JSON.stringify(this.form.items);
                    // form中存在id
                    if (this.form.id == null) {
                        addQuestion(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.$emit('triggerSubmitForm');
                        });
                    } else {
                        updateQuestion(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.$emit('triggerSubmitForm');
                            // this.getList();
                        });
                    }
                }
            });
        }
    },
    created() {

    },
    mounted() { },
    watch: {
        question: {
            immediate: true,
            deep: true,
            handler(newVal) {
                if (newVal.resetForm) {
                    this.reset();
                } else {
                    this.form = JSON.parse(JSON.stringify(newVal));
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.question-item-label {
    margin-top: 10px;
    margin-bottom: 10px !important;
}

.question-item-rate {
    line-height: 2.5;
}

.question-item-content-input {
    margin-left: 8px;
    width: 60%;
}

.question-item-span {
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 10px;
}
</style>